<template>
  <div class="my" v-if="userInfo && userInfo.name">
    <!-- 个人信息 -->
    <div class="userInfo">
      <div class="user">
        <span class="iconTitle">
          <span class="txt1">今日阅读</span><br />
          <span class="txt1">10分钟</span>
        </span>
        <div class="userimg" @click="clikcPic">
          <img :src="userInfo.photo" alt="" />
        </div>
        <div class="title">
          {{ userInfo.name }}
        </div>
      </div>
      <div class="txt">
        <div class="items">
          <div class="item">{{ userInfo.art_count }}</div>
          <div class="titletxt">动态</div>
        </div>
        <div class="items">
          <div class="item">{{ userInfo.follow_count }}</div>
          <div class="titletxt">关注</div>
        </div>
        <div class="items">
          <div class="item">{{ userInfo.fans_count }}</div>
          <div class="titletxt">粉丝</div>
        </div>
      </div>
    </div>
    <!-- 作品信息 -->
    <div class="star">
      <div class="item">
        <van-icon name="star-o" class="mycion item1" />
        <span>收藏</span>
      </div>
      <div
        class="item"
        style=" border-right: 1px solid #eee;border-left: 1px solid #eee; "
      >
        <van-icon name="clock-o" class="mycion item2" />
        <span>历史</span>
      </div>
      <div class="item">
        <van-icon name="orders-o" class="mycion item3" />
        <span>作品</span>
      </div>
    </div>
    <!-- 其他跳转信息 -->
    <div class="cell">
      <van-cell title="信息通知" is-link to="#" />
      <van-cell title="用户反馈" is-link to="#" />
      <van-cell title="小智同学" is-link to="#" />
    </div>
    <div class="logout">
      <van-button type="info" size="large" round @click="logout"
        >退出</van-button
      >
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { localDel } from '../../../utils/mylocal'

export default {
  computed: {
    ...mapState(['userInfo'])
  },
  data () {
    return {}
  },
  methods: {
    // 点击头像跳转页面
    clikcPic () {
      this.$router.push('/info')
    },
    logout () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确定要退出吗'
        })
        .then(() => {
          this.$store.commit('resetUserInfo')
          localDel('token')
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  created () {
    this.$store.dispatch('setUserInfo')
  }
}
</script>
<style lang="less" scoped>
.my {
  // 个人信息css
  .userInfo {
    padding: 0 25px;
    height: 200px;
    width: 100%;
    background-color: #3e9df8;
    padding-top: 50px;
    box-sizing: border-box;
    color: #fff;
    .user {
      position: relative;
      display: flex;
      .userimg {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .title {
        font-size: 20px;
      }
      .iconTitle {
        position: absolute;
        top: 0;
        right: 0;
        width: 68px;
        height: 42px;
        background-color: #1f4e7c;
        font-size: 12px;
        text-align: center;
        padding: 5px 0;
        box-sizing: border-box;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        margin-right: -25px;
        .txt1 {
          color: #fff;
        }
      }
    }
    .txt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 25px;
      .items {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 22px;
      }
    }
  }
  .star {
    display: flex;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    .item {
      display: flex;
      flex-direction: column;
      justify-items: center;
      align-items: center;
      flex: 1;
      padding: 20px 0;
      .mycion {
        font-size: 34px;
        margin-bottom: 10px;
      }
      .item1 {
        color: red;
      }
      .item2 {
        color: #ffaa3c;
      }
      .item3 {
        color: #3e9df8;
      }
      span {
        color: #646566;
      }
    }
  }
}
.logout {
  text-align: center;
  margin-top: 50px;
  padding: 0 40px;
}
</style>
